<template>
	<view>
		<scroll-view scroll-y="true" style="height: 100vh;background-color:#f5f5f5;">
			<view class="card">
				<text class="card-title">泉州风光</text>
				<swiper autoplay interval="3000" circular>
					<swiper-item>
						<image src="/static/city1.png" mode="widthFix" class="card-img"></image>
					</swiper-item>
					<swiper-item>
						<image src="/static/city2.jpg" mode="widthFix" class="card-img"></image>
					</swiper-item>
					<swiper-item>
						<image src="/static/city3.jpg" mode="widthFix" class="card-img"></image>
					</swiper-item>
					<swiper-item>
						<image src="/static/city4.jpg" mode="widthFix" class="card-img"></image>
					</swiper-item>
					<swiper-item>
						<image src="/static/city5.jpg" mode="widthFix" class="card-img"></image>
					</swiper-item>
				</swiper>
			</view>
			
			<view class="card">
				<text class="card-title">泉州介绍</text>
				<rich-text class="rich-text" :nodes="cityIntroduction"></rich-text>
			</view>
			
			<view class="card">
				<text class="card-title">探索进度</text>
				<view class="progress-container">
					<text class="progress-text">当前进度:{{progress}}%</text>
					<progress class="progress-bar" :percent="progress" show-info border-radius="10" active-color="#007AFF" backgroundColor="#f1f1f1"></progress>
				</view>
			</view>
			
			<view class="card">
				<text class="card-title">选择城市</text>
				<picker class="picker" mode="region" @change="onCityChange" :value="selectedCity">
					<view class="picker-text">
						当前选择:
						{{selectedCity[0]}} - {{selectedCity[1]}} - {{selectedCity[2]}}
					</view>
				</picker>
			</view>
			
			<view class="card">
				<text class="card-title">泉州宣传</text>
				<video :src="videoSrc" controls class="card-video"></video>
			</view>
			
			<view class="card">
				<text class="card-title">偏好设置</text>
				<view class="preference-item">
					<text>出行方式：</text>
					<radio-group @change="onTravelModeChange">
						<radio value="bus">公交</radio>
						<radio value="drive">自驾</radio>
						<radio value="walk">步行</radio>
					</radio-group>
				</view>
				<view class="preference-item">
					<text>显示推荐景点：</text>
					<switch @change="onShowAttractionsChange" :checked="showAttractions"></switch>
				</view>
				<view class="preference-item">
					<text>探索半径：{{radius}}km</text>
					<slider @change="onRadiusChange" :value="radius" min="1" max="50"></slider>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				cityIntroduction:'<h3>海上丝绸之路起点-泉州</h3><p><b>历史文化：</b>泉州是国务院首批公布的24个历史文化名 城之一，是古代”海上丝绸之路”起点，宋元时期被誉 为“东方第一大港”。</p><p><b>著名景点：</b>清源山、开元寺、泉州清净寺、崇武古 城、洛阳桥等。</p><p><b>特色文化：</b>拥有<span style="color:blue">南音</span>、<span style="color:blue">木偶戏</span>和<span style="color:blue">闽南建筑</span>等丰富的非 物质文化遗产。</p>',
				progress:60,
				selectedCity:['福建省','泉州市','丰泽区'],
				videoSrc:'/static/city-video.mp4',
				travelMode:'bus',
				showAttractions: true,
				radius:10,
			};
		},
		methods: {
			onCityChange(e){
				this.selectedCity=e.detail.value;
			},
			onTravelModeChange(e){
				this.travelMode=e.detail.value;
			},
			onShowAttractionsChange(e){
				this.showAttractions=e.detail.value;
			},
			onRadiusChange(e){
				this.radius=e.detail.value;
			}
		},
	};
</script>

<style scoped>
	.card{
		margin: 15px;
		padding: 15px;
		background-color: #fff;
		border-radius: 8px;
		box-shadow: 0 2px 4px rgba(0, 0,0,0.1);
	}
	.card-title{
		font-size: 18px;
		font-weight: bold;
		margin-bottom: 10px;
		display: block;
	}
	.card-img{
		width: 100%;
		height: 200px;
		border-radius: 6px;
	}
	.rich-text{
		line-height: 1.6;
	}
	.progress-container{
		margin-top: 10px;
	}
	.progress-text{
		display: block;
		margin-bottom: 5px;
	}
	.picker-text{
		padding: 10px;
		border: 1px solid #eee;
		border-radius: 4px;
		display: block;
	}
	.card-video{
		width: 100%;
		height: 160px;
		margin-bottom: 10px;
		border-radius: 6px;
	}
	.preference-item{
		margin-bottom: 15px;
		display: flex;
		align-items: center;
	}
	.preference-item radio-group{
		display: flex;
		margin-left: 10px;
	}
	.preference-item radio{
		margin-right: 15px;
	}
	.preference-item switch{
		margin-left: 70px;
	}
	.preference-item slider{
		margin-left: 10px;
		flex: 1;
	}
</style>